import * as React from 'react'
import { IUser } from '../../types'
import { useHistory } from 'react-router-dom';
import style from './style.module.css'
import Nav from '../../components/Nav'
import * as api from "../../services/api"

function Login() {
    const [user, setUser] = React.useState<IUser>()
    const history = useHistory()
    const logout = async () => {
        let result = await api.logout()
        if (result.stat === "OK") {
            history.push("/login")
        }
    }
    React.useEffect(() => {
        const userinfo = async () => {
            let result = await api.userInfo()
            if (result.stat === "OK") {
                setUser(result.data)
            } else {
                history.push("/login")
            }
        }
        userinfo()
    }, [history])
    return (
        <div className={style.back}>
            <div className={style.wrapper}>
                <img alt='' className={style.avater} src={user?.avatar}></img>
                <div className={style.text}>{user?.nickname}</div>
                <button className={style.outputButton} onClick={() => logout()} >退出登录</button>
            </div>
            <Nav />
        </div>
    )
}
export default Login